<template>
  <el-form
    :label-position="labelPosition"
    label-width="80px"
    :model="form"
    ref="ref_form"
    :rules="rules_registerForm"
    class="registerForm sign-up-form"
    :hide-required-asterisk="hideRequiredAsterisk"
  >
    <el-form-item label=" " prop="phoneNumber">
      <el-input placeholder="请输入手机号" v-model.trim="form.phoneNumber">
        <template #prepend>
          <img src="~@/assets/img/icon/user.png" alt
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item label=" " prop="password">
      <el-input placeholder="请输入初始密码" v-model.trim="form.password">
        <template #prepend>
          <img src="~@/assets/img/icon/pass.png" alt
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item label=" ">
      <div class="flex-j">
        <span></span>
        <el-button @click="clickBtn" type="text">登录</el-button>
      </div>
      <el-button type="primary" @click="onSubmit"> 注 册 </el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { reactive, toRefs, getCurrentInstance } from "vue";
import login from "@/mixin/login";

function useFeatureX() {
  // 响应式数据抽离出setup 具有代码可读性
  const state = reactive({
    form: { phoneNumber: "", password: "" },
  });
  return state;
}

export default {
  name: "RegisterForm",
  setup() {
    const { ctx } = getCurrentInstance();

    const data = useFeatureX();

    const onSubmit = () => {
      ctx.$refs.ref_form.validate((valid) => {
        if (valid) {
          emit("onSubmit", data.form);
        } else {
          return false;
        }
      });
    };

    const { mixin_loginData, clickBtn } = login();
    return {
      ...toRefs(data),
      ...toRefs(mixin_loginData),
      clickBtn,
      onSubmit,
    };
  },
};
</script>

